<template>
	<div id="open-camera-stream">
		<el-dialog :title="$t('oOtI25EloVhXthyiHd2l')" v-model="isShowDialog" draggable :close-on-click-modal="false" width="50%" :destroy-on-close="true" @close="handleClose">
			<div class="stream-part">
				<div style="margin: 5px 0px; font-weight: bolder">
					<el-tag size="small">{{ item.v_Name }}</el-tag>
				</div>
				<!-- <iframe width="100%" height="98%" :src="videoOptions.src"></iframe> -->
				<!-- <vue3VideoPlay 
                    width="100%"
                    title="摄像头"
                    :src="videoOptions.src"
                    :autoPlay="true"
                /> -->
				<!-- <VideoPlayer v-if="videoOptions.src" :url="videoOptions.src" :key="myKey" /> -->
				<!-- <video style="width: 100%; height: 100%" controls autoplay>
					<source src="http://183.239.186.195:8080/rtp/34020000002000009001_31017000001320009001/hls.m3u8" type="application/x-mpegURL" />
					
					<p>您的浏览器不支持播放此视频流，请升级到支持HLS的浏览器。</p>
				</video> -->
				<video ref="videoElement" style="width: 100%; height: 100%;" controls></video>
			</div>
			<template #footer>
				<el-button @click="handleClose">{{ $t('bg0dCh9NzdUyGoIvsnNRl') }}</el-button>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted, watch } from 'vue';
// import VideoPlayer from '/@/components/player/VideoPlayer/index.vue';
import Hls from 'hls.js';

export default defineComponent({
	name: 'open-camera-stream',
	props: {
		isShowDialog: {
			type: Boolean,
			default: false,
		},
		item: {
			type: Object,
			default: null,
		},
		src: {
			type: String,
			default: '',
		},
	},
	components: {},
	setup(props, ctx) {
		const myKey = new Date().getTime();
		const loading = ref(false);

		const itemArr = ref();

		const videoOptions = reactive({
			src: props.src, //视频源
			type: 'm3u8', //视频类型
		});

		/*** handleClose 关闭按钮点击事件 */
		const handleClose = () => {
			closeEvent();
		};

		/*** closeEvent 取消事件 */
		const closeEvent = () => {
			ctx.emit('close');
		};

		const selectStream = (streamPath: string, streamType: string) => {
			videoOptions.src = streamPath;
			videoOptions.type = streamType;
		};

		const videoElement = ref(null);
		onMounted(async () => {
			console.log(props.src);

			if (Hls.isSupported()) {
				const hls = new Hls();

				// 为HLS流注册事件
				hls.on(Hls.Events.MANIFEST_PARSED, function () {
					// 解析manifest后开始播放
					if (videoElement.value) {
						hls.attachMedia(videoElement.value);
						videoElement.value.play();
					}
				});

				// 设置HLS流的源地址
				// hls.loadSource('http://183.239.186.195:8080/rtp/34020000002000009001_31017000001320009001/hls.m3u8');
				hls.loadSource(props.src);

				// 当组件卸载时，销毁HLS实例释放资源
			}
		});

		return {
			loading,
			handleClose,
			itemArr,
			videoOptions,
			selectStream,
			myKey,
			videoElement,
		};
	},
});
</script>
<style scoped lang="scss">
#open-camera-stream {
	:deep(.el-select) {
		width: 100%;
	}
	:deep(.el-input) {
		width: 100%;
	}
	.stream-part {
		width: 100%;
		height: 500px;
	}
}
</style>
